<template>
  <div>
      <section class="menu-block">
        <h2>获取当前操作系统信息</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getOsDataCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getOsDataClick">点击获取系统信息</van-button>
            <code>当前操作系统：{{ os }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前操作系统版本</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getOsVersionCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getOsVersionClick">点击获取系统版本</van-button>
            <code>当前操作系统版本：{{ osVersion }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机品牌</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getBrandCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getBrandClick">点击获取手机品牌</van-button>
            <code>当前手机品牌：{{ brand }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机型号</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getModelCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getModelClick">点击获取手机型号</van-button>
            <code>当前手机型号：{{ model }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机系统设置语言</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getLanguageCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getLanguageClick">点击获取手机语言</van-button>
            <code>当前手机语言：{{ language }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机系统设置区域</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getAreaCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getAreaClick">点击获取手机区域</van-button>
            <code>当前手机区域：{{ area }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机deviceId</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getDeviceIdCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getDeviceIdClick">点击获取deviceId</van-button>
            <code>当前deviceId：{{ deviceId }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取当前手机系统屏幕信息</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getScreenInfoCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getScreenInfoClick">点击获取手机屏幕信息</van-button>
            <code>当前手机屏幕信息：{{ screenInfo }}</code>
        </div>
      </section>
  </div>
</template>

<script>
import {Button} from 'vant'
import {system} from 'MTHybrid'

export default {
    data () {
        return {
            getOsDataCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.os();',
            os: '',
            getOsVersionCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.osVersion();',
            osVersion: '',
            getBrandCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.brand();',
            brand: '',
            getModelCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.model();',
            model: '',
            getLanguageCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.language();',
            language: '',
            getAreaCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.area();',
            area: '',
            getDeviceIdCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.deviceId();',
            deviceId: '',
            getScreenInfoCode: 'import {system} from \'fzHybrid\'\n...\nvar data = system.screenInfo();',
            screenInfo: ''
        }
    },
    methods: {
        getOsDataClick () {
            var os = system.os()
            this.os = os
        },
        getOsVersionClick () {
            var version = system.osVersion()
            this.osVersion = version
        },
        getBrandClick () {
            var brand = system.brand()
            this.brand = brand
        },
        getModelClick () {
            var model = system.model()
            this.model = model
        },
        getLanguageClick () {
            var language = system.language()
            this.language = language
        },
        getAreaClick () {
            var area = system.area()
            this.area = area
        },
        getDeviceIdClick () {
            var deviceId = system.deviceId()
            this.deviceId = deviceId
        },
        getScreenInfoClick () {
            var screenInfo = system.screenInfo()
            this.screenInfo = JSON.stringify(screenInfo)
        }
    },
    components: {
        [Button.name]: Button
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
